import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../../utils/xh_styles.dart';
import '../../../../utils/xin_he_image.dart';
import 'xin_he_seller_member_logic.dart';

class XinHeSellerMemberPage extends StatelessWidget {
  XinHeSellerMemberPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeSellerMemberLogic());
  final state = Get.find<XinHeSellerMemberLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.white,
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              logic.closeKeyboard();
              Get.back();
            },
            icon: Container(
              padding: EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('商家会员',style: TextStyle(color:XinHeColor('##222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Obx(() => Column(
        // padding: EdgeInsets.zero,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [

          ///search
          Container(
            padding: const EdgeInsets.only(left: 15,right: 15,top: 10,bottom: 12),
            height: 35+22,
            color: Colors.white,
            child: Container(
                width: Get.width - 30,
                decoration: BoxDecoration(color: XinHeColor('#F0F7F8'),borderRadius: BorderRadius.circular(17.5)),
                alignment: Alignment.center,
                child:Row(children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 10,right: 5),
                    child: XinHeAssetImage('assets/images/home/search_12.png',width: 12,height: 12,fit: BoxFit.fill,),
                  ),

                  Expanded(
                    child: TextField(
                      controller: logic.editingController,
                      onChanged: (value){
                        logic.inputChange(value);
                      },
                      onSubmitted: (value){
                        logic.onInputSubmitAction();
                      },

                      onEditingComplete: logic.onInputEditCompleteAction,
                      maxLines: 1,
                      // maxLength: 15,
                      style:   TextStyle(fontSize: 14,color: XinHeColor('#15161F')),
                      decoration:  InputDecoration(
                          hintText:  '请输入商品名',
                          hintStyle: TextStyle(fontSize: 14,color: XinHeColor('#B1B1B1') ),
                          filled: true,
                          fillColor:  XinHeColor('#F7F8F9'),
                          border: const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          enabledBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          focusedBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          disabledBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          contentPadding: const EdgeInsets.only(top: 0,bottom: 0,left: 0,right: 15)
                      ),
                      // inputFormatters: [LengthLimitingTextInputFormatter(15)],
                    ),
                  ),

                  ///一键清除文本
                  state.isShowDelete.value
                      ? GestureDetector(
                    onTap: (){
                      logic.clearInputContent();
                    },
                    child: Container(
                      // padding: EdgeInsets.all(3),
                      margin: const EdgeInsets.only(left: 8),
                      height: 20,
                      width: 20,
                      child: const XinHeAssetImage('assets/images/home/input_delete.png',width: 20,height: 20,fit: BoxFit.fill,),

                    ),
                  )
                      :Container(),

                  GestureDetector(
                    onTap: (){
                      logic.onInputEditCompleteAction();
                    },
                    child: Container(
                      width: 54,
                      height: 33,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.5),
                      ),
                      child:  Text('搜索',style: TextStyle(color: XinHeStyle.mainGreenColor,fontSize: 14,fontWeight: FontWeight.w500),),
                    ),
                  ),
                ],)
              // Text('请输入商品名',style: TextStyle(color: XinHeColor('#C3C3C3'),fontSize: 13),)
            ),

          ),

          SizedBox(height: 10,),
          state.isShowResultPage.value
              ?_bottomItemListView()
              :Container()

        ],)),
    );
  }

  Widget _bottomItemListView() {
    return  Container(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      margin: const EdgeInsets.symmetric(horizontal: 15),
      height: 322,
      decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 10,),
          Text('会员人数：20',style: TextStyle(color: XinHeColor('#2B3131'),fontSize:13 ,fontWeight: FontWeight.w500),),
          SizedBox(height: 10,),
          Expanded(
            child: ListView.builder(
                padding: EdgeInsets.zero,
                itemCount: 2,
                itemBuilder: (ctx,index){
                  return SizedBox(height: 70,width: Get.width-60,
                    child: Row(
                      children: [
                        const XinHeAssetImage('assets/images/mine/default_avatar.png',width: 35,height: 35,),
                        const SizedBox(width: 5,),
                        Text('用户名称',style: TextStyle(color:XinHeColor('#333333'),fontSize:14,fontWeight: FontWeight.w500  ),),
                        Spacer(),
                        Text('2023/05/26  09:30',style: TextStyle(color:XinHeColor('#999999'),fontSize:14,fontWeight: FontWeight.w500  ),)
                      ],),
                  );
                }
            ),
          )
        ],),
    )
    ;
  }
}
